<template>
    <div id="container" ref="appRef">
        <div class="wrapper">
            <dv-loading v-if="flag">Loading...</dv-loading>
            <div class="box" v-else>
                <div class="header">
                    <div class="d-flex jc-center">
                        <dv-decoration-10 class="dv-dec-10" />
                        <div class="d-flex jc-center">
                            <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
                            <div class="title">
                                <span class="title-text">大数据可视化平台</span>
                                <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" />
                            </div>
                            <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColor" />
                        </div>
                        <dv-decoration-10 class="dv-dec-10-s" />
                    </div>

                    <!-- 第二行 -->
                    <div class="d-flex jc-between px-2">
                        <div class="d-flex aside-width">
                            <div class="react-left ml-4 react-l-s">
                                <span class="react-left"></span>
                                <span class="text">数据分析1</span>
                            </div>
                            <div class="react-left ml-3">
                                <span class="text">数据分析2</span>
                            </div>
                        </div>
                        <div class="d-flex aside-width">
                            <div class="react-right bg-color-blue mr-3">
                                <span class="text fw-b">vue-big-screen</span>
                            </div>
                            <div class="react-right mr-4 react-l-s">
                                <span class="react-after"></span>
                                <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-one">
                    <one-left-first></one-left-first>
                    <one-left-second></one-left-second>
                    <one-middle-thirdly></one-middle-thirdly>
                    <one-right-fourth></one-right-fourth>
                    <one-right-fifth></one-right-fifth>
                </div>
                <div class="content-two">
                    <two-left-first></two-left-first>
                    <two-left-second></two-left-second>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import drawMixin from '@/utils/drawMixin'
import oneLeftFirst from '@/components/oneLeftFirst'
import oneLeftSecond from '@/components/oneLeftSecond'
import oneMiddleThirdly from '@/components/oneMiddleThirdly'
import oneRightFourth from '@/components/oneRightFourth'
import oneRightFifth from '@/components/oneRightFifth'
import twoLeftFirst from '@/components/twoLeftFirst'
import twoLeftSecond from '@/components/twoLeftSecond'
import { formatTime } from '../utils/index.js'
export default {
    mixins: [drawMixin],
    data() {
        return {
            flag: true,
            decorationColor: ['#568aea', '#000000'],
            weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
            loading: true,
            dateDay: null,
            dateYear: null,
            dateWeek: null,
        };
    },
    mounted() {
        this.loadFn()
        this.timeFn()
    },
    watch: {

    },
    methods: {
        timeFn() {
            this.timing = setInterval(() => {
                this.dateDay = formatTime(new Date(), 'HH: mm: ss')
                this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
                this.dateWeek = this.weekday[new Date().getDay()]
            }, 1000)
        },
        loadFn() {
            setTimeout(() => {
                this.flag = false
            }, 800);
        }
    },
    components: {
        oneLeftFirst,
        oneLeftSecond,
        oneMiddleThirdly,
        oneRightFourth,
        oneRightFifth,
        twoLeftFirst,
        twoLeftSecond
    },
};
</script>

<style lang="scss" scoped>
@import '../assets/scss/index.scss';

#container {
    color: #d3d6dd;
    width: 1920px;
    height: 1080px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left top;
    overflow: hidden;

    .wrapper {
        width: 100%;
        height: 100%;
        padding: 16px 16px 0 16px;
        background-image: url("../assets/pageBg.png");
        background-size: cover;
        background-position: center center;
    }
}

.dv-loading {}

.box {
    font-size: 30px;
    color: #fff;
}

.header {
    height: 100px;
}

.d-flex {
    display: flex;
}

.jc-between {
    justify-content: space-between;
}
.bg-color-blue{
    background: blue;
}
.content-one {
    display: flex;
    height: 411px;
    margin: 10px 0 0 0;
    // justify-content: space-around;
}

.content-two {
    margin: 10px 0 0 0;
    display: flex;
    height: 520px;
}


</style>
